<template>
	<div class="new-appiont">
		<div v-for="(item, index) in list" :key="index">
			<el-row type="flex" class="appoint-info" v-if="!browser.isMobile">
				<div class="flex flex-align-center">
					<div class="item"><span>预约时间：</span>{{ item.appoint_date }} ({{ item.cus_type == 1 ? '新客' : '老客' }})</div>
					<!-- <div class="item"><span>类型：</span>{{ item.cus_type == 1 ? '新客' : '老客' }}</div> -->
					<div class="item"><span>预约门店：</span>{{ item.dept_name }}</div>
					<div class="item"><span>预约品牌：</span>{{ item.bra_name }}</div>

					<div class="item">
						<span>预约状态：</span
						><span style="color: #156DFF">{{ filterType(item.status) }}</span>
					</div>
					<div class="item">
						<el-button
							type="warning"
							size="mini"
							v-auth="'store_cusdetailindex_gaiyue'"
							@click="openAppoint(item)"
							v-if="![2, 4, 6, 7].includes(item.status)">
							修改预约信息
						</el-button>
					</div>
					<!-- <div class="item">
						[预约人员：{{ item.add_dept_name }} - {{ item.add_user_name }}]
					</div> -->
				</div>
				<cl-flex1 />
				<el-button
					type="primary"
					v-auth="'store_cusdetailindex_gaiyue_time'"
					@click="modifyCartForm(item)"
					v-if="![2, 4, 6, 7].includes(item.status)"
				>
					改约
				</el-button>
				<el-button
					type="danger"
					v-auth="'store_appoint_lose'"
					@click="changeRunoff(item)"
					v-if="item.status == 1"
					>流失</el-button
				>
				<el-button
					type="danger"
					v-auth="'store_appoint_lose'"
					@click="arrived(item)"
					v-if="item.status == 1"
					>{{ item.order_user_arrived === 0 ? `售中到店` : `取消到店`}}</el-button
				>
			</el-row>
			<el-row v-else>
				<el-col>
					<div><span>预约时间：</span>{{ item.appoint_date }}</div></el-col
				>
				<el-col class="mt-1">
					<div><span>预约门店：</span>{{ item.dept_name }}</div></el-col
				>
				<el-col class="mt-1">
					<div><span>预约品牌：</span>{{ item.bra_name }}</div></el-col
				>
				<el-col class="mt-1">
					<div>
						<span>预约状态：</span>
						<span style="color: #156DFF">{{ filterType(item.status) }}</span>
					</div>
				</el-col>
				<el-col class="mt-1">
					<el-button
						type="warning"
						size="mini"
						@click="openAppoint(item)"
						v-if="![2, 4, 6, 7].includes(item.status)"
						v-auth="'store_cusdetailindex_gaiyue'"
					>
						修改预约信息
					</el-button>
					<el-button
						style="margin-left: 10px; "
						type="primary"
						@click="modifyCartForm(item)"
						v-if="![2, 4, 6, 7].includes(item.status)"
						v-auth="'store_cusdetailindex_gaiyue_time'"
					>
						改约
					</el-button>
					<el-button
						style="margin-left: 10px; "
						type="danger"
						@click="changeRunoff(item)"
						v-auth="'store_appoint_lose'"
						v-if="item.status == 1 && item.cus_type != 2"
						>流失</el-button
					>
				</el-col>
			</el-row>
			<el-divider />
			<div class="source"  v-if="!browser.isMobile">
				<span>预约来源：</span>[{{ item.add_dept_name }} - {{ item.add_user_name }}]
				<span class="ml-3">排店来源：</span>
				<span class="mr-3">[{{ item.order_date_id_dept }} - {{ item.order_date_id_name }}]</span>
				<el-button type="warning" size="mini" v-auth="'store_cusdetailindex_gaiyue_dept'" v-if="![2, 4, 6, 7].includes(item.status)" @click="modifyDeptForm(item)">修改来源部门</el-button>
			</div>
			<el-row v-else>
				<el-col
					><span>预约来源：</span>[{{ item.add_dept_name }} -
					{{ item.add_user_name }}]</el-col
				>
				<el-col class="mt-1"
					><span>排店来源：</span>
					<span class="mr-3"
						>[{{ item.order_date_id_dept_name }} - {{ item.order_date_id_name }}]</span
					></el-col
				>
				<el-col class="mt-1"
					><el-button
						type="warning"
						size="mini"
						v-auth="'store_cusdetailindex_gaiyue_dept'"
						v-if="![2, 4, 6, 7].includes(item.status)"
						@click="modifyDeptForm(item)"
						>修改来源部门</el-button
					></el-col
				>
			</el-row>
			<cl-crud style="padding: 10px 0">
				<zm-table
					ref="table"
					:data="item.service_info || []"
					:columns="columns"
					:auto-height="false"
					:context-menu="[]"
				>
					<cl-empty slot="empty" />
					<template #column-name="{ scope: { row } }">
						{{ row.name }}
						<span class="tag ml-1" v-if="row.maintain_type == 1"> 维护 </span>
						<span class="tag ml-1" v-if="row.maintain_type == 2"> 开发 </span>
					</template>
					<template #column-opt="{ scope: { row } }">
						<cl-choice-upgrade
							:biz_id="detail.biz_id"
							disabled
							@confirm="v => onUpgrade(row, v[0])"
						/>
					</template>
				</zm-table>
			</cl-crud>
		</div>
		<!-- 修改预约 -->
		<cl-appoint-form ref="form" is-edit @confirm="init" />
		<modify-cart-dept ref="modifyCartDept" @confirm="init"></modify-cart-dept>
		<modify-cart-time ref="modifyCartTime" @confirm="init"></modify-cart-time>

		<runoff-form ref="runoffForm" @confirm="runoffConfirm" />
	</div>
</template>
<script>
import RunoffForm from "./runoff-form";
import ModifyCartDept from "@/components/modify-cart/modify-dept"
import ModifyCartTime from "@/components/modify-cart/modify-time"
import { mapState, mapGetters } from "vuex";
function filterType(val) {
	switch (val) {
		case 1:
			val = "生效中";
			break;
		case 2:
			val = "已开单";
			break;
		case 4:
			val = "已取消";
			break;
		case 5:
			val = "已超时";
			break;
		case 6:
			val = "流失中";
			break;
		case 7:
			val = "已流失";
			break;
	}
	return val;
}
export default {
	inject: ["parent"],
	props: {
		detail: {
			type: Object,
			default: () => ({})
		}
	},
	components: {
		RunoffForm,
		ModifyCartDept,
		ModifyCartTime
	},
	data() {
		return {
			filterType,
			list: [],
			columns: [
				{
					label: "预约项目",
					prop: "name",
					minWidth: 200,
					align: "left",
					showOverflowTooltip: true
				},
				{ label: "预约数量", prop: "num", width: 80 },
				{
					label: "预约老师",
					prop: "teacher_name",
					minWidth: 100,
					align: "left",
					showOverflowTooltip: true,
					formatter: row => {
						return row.teacher_name || row.teacher_name == "-"
							? "未指定"
							: row.teacher_name;
					}
				},
				{
					label: "预约价格",
					prop: "unit_price",
					minWidth: 120,
					formatter: row => `￥${row.unit_price || 0}`
				}
			]
		};
	},
	computed: {
		...mapGetters(["browser"])
	},
	methods: {
		async init() {
			const { cus_id } = this.detail;
			const { list } = await this.$service.cart.page({
				cus_id,
				search_content: cus_id,
				search_type: 7,
				status: 1
			});
			this.list = list;
		},
		// 打开预约
		openAppoint(data) {
			this.$refs.form.open(data);
			// this.parent.openAppoint(data);
		},
		// 修改来源部门
		modifyDeptForm(data) {
			this.$refs.modifyCartDept.open(data)
		},
		// 修改预约时间
		modifyCartForm(data) {
			this.$refs.modifyCartTime.open(data)
		},
		onUpgrade(row, v) {
			row.upgradeService = v;
			console.log(row);
		},
		runoffConfirm() {
			this.init();
			this.parent.getCartList();
		},
		async changeRunoff(item) {
			let { biz_id, cart_id, appoint_date } = item;
			this.$refs.runoffForm.open(item);
		},
		async arrived(item) {
			await this.$service.cart.arrived({cart_id: item.cart_id})
			this.$message.success('操作成功')
			this.init()
			this.parent.getCartList();
		}
	}
};
</script>
<style lang="scss" scoped>
.appoint-info {
	.item {
		display: inline-block;
		span {
			color: #7f7f7f;
		}
		& + .item {
			margin-left: 40px;
		}
	}
}
.source {
	span {
		color: #7f7f7f;
	}
}
</style>
